<template>
  <div>
    <pannel-Title name="电表分项列表" class="mt10 app-list">
      <img slot="icon" src="@/assets/images/inspect/leakage.png" alt="" />
      <div slot="tips">
        <el-button type="primary" size="small" @click="handlerGolist">
          电表历史预警信息
        </el-button>
      </div>
      <el-row :gutter="20">
        <el-col :span="4" :xs="12">
          <totalCol :totalObj="totalalarmNum"></totalCol>
        </el-col>
        <el-col :span="4" :xs="12" class="exhibition-area">
          <div class="exhibition">
            <h4>最新整体能耗</h4>
            <p class="yellow">平均电压{{ datas.averagevoltage }}V</p>
            <p class="green">合计电流{{ datas.allelectricCurrent }}A</p>
            <p class="red">合计功率{{ datas.allpower }}Kw</p>
          </div>
        </el-col>
        <el-col :span="16" :xs="24">
          <el-row :gutter="20" class="vll" v-if="datas.list.length > 0">
            <el-col v-for="(item, index) in datas.list" :key="index" :span="8">
              <div class="content">
                <div class="content-left">
                  <p>
                    {{ item.cardNum }}
                  </p>
                  <p>
                    {{ item.deviceCode }}
                  </p>
                  <el-button
                    :class="
                      item.status == '2' ? 'danger-button' : 'primary-button'
                    "
                    round
                    @click="detail(item)"
                  >
                    <div class="marquee-wrap">
                      <div
                        :class="
                          item.realLocal.length > 10
                            ? 'marquee-content-wrap'
                            : 'marquee-content'
                        "
                        :nextText="item.realLocal"
                      >
                        {{ item.realLocal }}
                      </div>
                    </div>
                  </el-button>
                </div>
                <div class="content-right">
                  <p>{{ item.voltage | Electricity }}V</p>
                  <p>{{ item.electricCurrent | Electricity2 }}A</p>
                  <p>{{ item.power | Electricity2 }}Kw</p>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row v-else class="vll">
            <el-col :span="24" class="mid">
              <p>该终端下暂无电表</p>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </pannel-Title>
    <detail :id="id" :visible.sync="show" @close="close"></detail>
  </div>
</template>

<script>
import detail from "@/views/maintenance/realtime/inspect/components/detail";
import totalCol from "@/views/maintenance/realtime/inspect/components/totalCol.vue";
import { dealElectricity } from "@/utils/index";
export default {
  name: "inspectList",
  components: {
    detail,
    totalCol,
  },
  props: {
    datas: {
      type: Object,
      default: {},
    },
    totalalarmNum: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      id: "",
      show: false,
    };
  },
  filters: {
    Electricity(num) {
      let result = dealElectricity(num);
      return result;
    },
    Electricity2(num) {
      let result = dealElectricity(num, 1000, 3);
      return result;
    },
  },
  methods: {
    detail(row) {
      this.id = row.deviceCode || "";
      this.show = true;
    },
    close(status) {
      this.show = false;
      // if (status) this.getBudgetdata();
    },
    handlerGolist() {
      this.$router.push({
        name: "alarmList",
        query: {
          type: "1",
        },
      });
    },
  },
};
</script>
<style scoped lang="scss">
@import "@/assets/styles/mixin.scss";
@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
.app-list {
  height: 410px;
  // .exhibition-area {
  //   // display: flex;
  //   // align-items: center;
  //   // justify-content: center;
  // }
  .exhibition {
    max-width: 200px;
    margin: 0 auto;
    padding: 10px;
    text-align: center;
    background: #f3f9fe;
    h4 {
      font-size: 14px;
      margin: 10px 0;
    }
    p {
      font-size: 12px;
    }
    .yellow {
      color: #ff9e00;
    }
    .green {
      color: #00cd34;
    }
    .red {
      color: #f03838;
    }
  }
  .content {
    border: 1px dashed #cbccce;
    height: 130px;
    padding: 0 5px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    .content-left {
      flex: 1;
      text-align: center;
      overflow: hidden;
      p {
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .danger-button {
        color: #f56c6c;
        border: 1px solid #f56c6c;
      }
      .primary-button {
        color: #3385ff;
        border: 1px solid #3385ff;
      }
      .el-button {
        width: 100%;
        font-weight: bold;
        overflow: hidden;
        .marquee-wrap {
          width: 160px;
          white-space: nowrap;
          overflow: hidden;
          .marquee-content {
            width: 100%;
          }
          .marquee-content-wrap {
            position: relative;
            width: fit-content;
            animation: move 7s linear infinite;
            padding-left: 20px;
            &::after {
              position: absolute;
              right: -100%;
              content: attr(nextText);
            }
          }
        }
      }
    }
    .content-right {
      width: 100px;
      text-align: center;
      border-radius: 5px;
      font-size: 14px;
      padding: 6px;
      margin: 10px;
      background: #f3f9fe;
    }
  }
  .vll {
    overflow: hidden;
    overflow-y: auto;
    height: 300px;
    @include scrollBar2;
    .mid {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      p {
        font-size: 32px;
        color: #1890ff;
      }
    }
  }
}
</style>
